<input type="hidden" th:value="#{common.dialog.add}" id="addTitle">
<input type="hidden" th:value="#{common.dialog.edit}" id="editTitle">
<div id="main" class="pd14 vany_authority">
    <div class="vany_treeTable pd14">
        <!--面包屑-->
        <div class="pb10" id="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }" th:text="#{breadcrumb.procurement}">Procurement Community
                </el-breadcrumb-item>
                <el-breadcrumb-item th:text="#{breadcrumb.category}">Procurement Community</el-breadcrumb-item>
            </el-breadcrumb>
            <i-favorite></i-favorite>
        </div>
        <div>
            <el-tabs type="card" @tab-click="changeTab">
                <el-tab-pane th:label="#{category.tab1}"></el-tab-pane>
                <el-tab-pane th:label="#{category.tab2}"></el-tab-pane>
                <el-tab-pane th:label="#{category.tab3}"></el-tab-pane>
            </el-tabs>
        </div>
        <div v-show="tabType==0">
            <el-form :inline="true">
                <el-form-item>
                    <el-form-item th:label="#{category.tab1.code}">
                        <el-input v-model="tab1.search.code" clearable></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-form-item th:label="#{category.tab1.des}">
                        <el-input v-model="tab1.search.des" clearable></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-form-item th:label="#{category.tab1.level}">
                        <el-select v-model="tab1.search.level">
                            <el-option value="" label="All">All</el-option>
                            <el-option v-for="item in tab1.levels" :label="item.name" :value="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getCategoryList" th:text="#{common.search}">search</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col>
                    <el-button type="primary" icon="el-icon-plus" @click="addCategory" th:text="#{common.add}">Add
                    </el-button>
                    <el-button type="primary" icon="el-icon-share" @click="exportVisible=true"
                               th:text="#{common.export}">Export
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-row>
                        <el-input placeholder="" v-model="treeKey" icon="search" clearable style="width: 100%;">
                        </el-input>
                    </el-row>
                    <el-tree :data="tab1.treeData"
                             :filter-node-method="filterNode"
                             ref="tree"
                    >
                    </el-tree>
                </el-col>
                <el-col :span="20">
                    <el-table :data="tab1.tableData" v-loading="tab1.listLoading" :height="tableHeight">
                        <el-table-column label="" prop="id">
                            <template scope="scope">
                                <img src="templates/img/edit.png" @click="editCategory(scope.row)"/>
                                <img src="templates/img/delete.png" @click="deleteCategory(scope.row)"/>
                            </template>
                        </el-table-column>
                        <el-table-column th:label="#{category.tab1.table.col1}" type="index"></el-table-column>
                        <el-table-column th:label="#{category.tab1.level}" prop="currentLevel"></el-table-column>
                        <el-table-column th:label="#{category.tab1.code}" prop="code"></el-table-column>
                        <el-table-column th:label="#{category.tab1.table.col4}"
                                         prop="englishDescription"></el-table-column>
                        <el-table-column th:label="#{category.tab1.table.col5}"
                                         prop="chineseDescription"></el-table-column>
                        <el-table-column th:label="#{category.tab1.table.col6}" prop="parentLevel"></el-table-column>
                        <el-table-column th:label="#{category.tab1.table.col7}" prop="parentCode"></el-table-column>
                        <el-table-column th:label="#{category.tab1.table.col8}">
                            <template scope="scope">
                                <el-checkbox :checked="scope.row.mask==1" v-model="scope.row.mask" :true-label="1"
                                             :false-label="0" @change="mask(scope.row)"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column th:label="#{common.update.user}" prop="modifyUserName"></el-table-column>
                        <el-table-column th:label="#{common.update.date}" prop="modifyTime"></el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change=""
                            @current-change=""
                            :current-page="tab1.current"
                            :page-size="tab1.size"
                            layout="total, prev, pager, next"
                            :total="tab1.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="tab1.addVisible">
            <el-form :model="tab1.form" label-width="200px">
                <el-col :span="12">
                    <el-form-item th:label="#{category.tab1.code}">
                        <el-input v-model="tab1.form.code" :disabled="tab1.editDisabled"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item th:label="#{category.tab1.level}">
                        <el-select v-model="tab1.form.currentLevel" th:placeholder="#{common.hint.select}"
                                   @change="changeLevel" :disabled="tab1.editDisabled">
                            <el-option v-for="item in tab1.levels" :label="item.name" :value="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item th:label="#{category.tab1.table.col4}">
                        <el-input
                                type="textarea"
                                :rows="2"
                                v-model="tab1.form.englishDescription">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item th:label="#{category.tab1.table.col5}">
                        <el-input
                                type="textarea"
                                :rows="2"
                                v-model="tab1.form.chineseDescription">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item th:label="#{category.tab1.table.col7}">
                        <el-select v-model="tab1.form.parentCode" th:placeholder="#{common.hint.select}" :disabled="tab1.editDisabled">
                            <el-option v-for="item in tab1.list" :label="item.code" :value="item.code"
                                       :key="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item th:label="#{category.tab1.table.col6}" >
                        <el-select v-model="tab1.form.parentLevel" th:placeholder="#{common.hint.select}" :disabled="tab1.editDisabled">
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitCategory" th:text="#{common.submit}">确 定</el-button>
                <el-button @click="tab1.addVisible = false" th:text="#{common.cancel}">取 消</el-button>
            </span>
        </el-dialog>
        <div v-show="tabType==1">
            <el-form :inline="true">
                <el-form-item th:label="#{category.tab2.search1}">
                    <el-select v-model="tab2.search.codes" multiple  collapse-tags>
                        <el-option
                                v-for="item in categories"
                                :key="item.id"
                                :label="item.code"
                                :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{category.tab2.search2}">
                    <el-select v-model="tab2.search.cms" multiple  collapse-tags>
                        <el-option
                                v-for="item in tab2.cms"
                                :key="item.id"
                                :label="item.chineseName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{category.tab2.search3}">
                    <el-select v-model="tab2.search.status">
                        <el-option
                                v-for="item in tab2.statusArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getCategoryManager" th:text="#{common.search}">search</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col>
                    <el-button type="primary" icon="el-icon-share" @click="" th:text="#{common.export}">
                        Export
                    </el-button>
                </el-col>
            </el-row>
            <el-table :data="tab2.tableData" v-loading="tab2.listLoading" :height="tableHeight">
                <el-table-column label="" prop="id">
                    <template scope="scope">
                        <img src="templates/img/edit.png" @click="editCategoryManager(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column th:label="#{category.tab1.table.col1}" type="index"></el-table-column>
                <el-table-column th:label="#{category.tab2.search1}" prop="code"></el-table-column>
                <el-table-column th:label="#{category.tab1.table.col4}" prop="englishDescription"></el-table-column>
                <el-table-column th:label="#{category.tab1.table.col5}" prop="chineseDescription"></el-table-column>
                <el-table-column th:label="#{category.tab2.search2}" prop="managerName"></el-table-column>
                <el-table-column th:label="#{category.tab2.search3}">
                    <template scope="scope">
                        {{scope.row.id==null?'No':'Yes'}}
                    </template>
                </el-table-column>
                <el-table-column th:label="#{common.update.user}" prop="modifyUserName"></el-table-column>
                <el-table-column th:label="#{common.update.date}" prop="modifyTime"></el-table-column>
            </el-table>
            <el-pagination
                    @size-change=""
                    @current-change=""
                    :current-page="tab2.search.current"
                    :page-size="tab2.search.size"
                    layout="total, prev, pager, next"
                    :total="tab2.total">
            </el-pagination>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="tab2.addVisible">
            <el-form :model="tab2.form" label-width="200px">
                <el-form-item th:label="#{category.tab2.search1}">
                    <el-input v-model="tab2.form.categoryCode" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item th:label="#{category.tab2.search2}">
                    <el-select v-model="tab2.form.manager" th:placeholder="#{common.hint.select}"
                              >
                        <el-option v-for="item in tab2.cms" :label="item.chineseName" :value="item.id"
                                   :key="item.id">
                            <span style="float: left">{{ item.chineseName }}</span>
                            <span style="float: right">{{ item.sapStaffNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitCategoryManager" th:text="#{common.submit}">确 定</el-button>
                <el-button @click="tab2.addVisible = false" th:text="#{common.cancel}">取 消</el-button>
            </span>
        </el-dialog>
        <div v-show="tabType==2">
            <el-form :inline="true">
                <el-form-item th:label="#{category.tab2.search1}">
                    <el-select v-model="tab3.search.codes" multiple  collapse-tags>
                        <el-option
                                v-for="item in categories"
                                :key="item.id"
                                :label="item.code"
                                :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{category.tab3.search2}" multiple  collapse-tags>
                    <el-select v-model="tab3.search.users">
                        <el-option
                                v-for="item in tab3.searchUsers"
                                :key="item.id"
                                :label="item.chineseName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{category.tab2.search3}">
                    <el-select v-model="tab3.search.status">
                        <el-option
                                v-for="item in tab3.statusArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getCategoryEngineer" th:text="#{common.search}">search</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col>
                    <el-button type="primary" icon="el-icon-share" @click="" th:text="#{common.export}">
                        Export
                    </el-button>
                </el-col>
            </el-row>
            <el-table :data="tab3.tableData" v-loading="tab3.listLoading" :height="tableHeight">
                <el-table-column label="" prop="id">
                    <template scope="scope">
                        <img src="templates/img/edit.png" @click="editCategoryEngineer(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column th:label="#{category.tab1.table.col1}" type="index"></el-table-column>
                <el-table-column th:label="#{category.tab2.search1}" prop="code"></el-table-column>
                <el-table-column th:label="#{category.tab1.table.col4}" prop="englishDescription"></el-table-column>
                <el-table-column th:label="#{category.tab1.table.col5}" prop="chineseDescription"></el-table-column>
                <el-table-column th:label="#{category.tab3.sscme}" prop="sscmeName"></el-table-column>
                <el-table-column th:label="#{category.tab3.sqme}" prop="sqmeName"></el-table-column>
                <el-table-column th:label="#{category.tab2.search3}">
                    <template scope="scope">
                        {{scope.row.id==null?'No':'Yes'}}
                    </template>
                </el-table-column>
                <el-table-column th:label="#{common.update.user}" prop="modifyUserName"></el-table-column>
                <el-table-column th:label="#{common.update.date}" prop="modifyTime"></el-table-column>
            </el-table>
            <el-pagination
                    @size-change=""
                    @current-change=""
                    :current-page="tab3.search.current"
                    :page-size="tab3.search.size"
                    layout="total, prev, pager, next"
                    :total="tab3.total">
            </el-pagination>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="tab3.addVisible">
            <el-form :model="tab3.form" label-width="200px">
                <el-form-item th:label="#{category.tab2.search1}">
                    <el-input v-model="tab3.form.categoryCode" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item th:label="#{category.tab3.sscme}">
                    <el-select v-model="tab3.form.sscme" th:placeholder="#{common.hint.select}"
                    >
                        <el-option v-for="item in tab3.sscmes" :label="item.chineseName" :value="item.id"
                                   :key="item.id">
                            <span style="float: left">{{ item.chineseName }}</span>
                            <span style="float: right">{{ item.sapStaffNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item th:label="#{category.tab3.sqme}">
                    <el-select v-model="tab3.form.sqme" th:placeholder="#{common.hint.select}"
                    >
                        <el-option v-for="item in tab3.sqmes" :label="item.chineseName" :value="item.id"
                                   :key="item.id">
                            <span style="float: left">{{ item.chineseName }}</span>
                            <span style="float: right">{{ item.sapStaffNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitCategoryEngineer" th:text="#{common.submit}">确 定</el-button>
                <el-button @click="tab3.addVisible = false" th:text="#{common.cancel}">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</div>

<script type="text/javascript" src="templates/data/js/category.js?ts=new Date().getTime()"></script>